<template>
  <div>
    <div class="app-container">
      <el-card class="searchTop" shadow="never" style="margin-top: -10px">
        <div>
          <el-form :inline="true" :model="searchFormInline">
            <el-form-item label="SN:">
              <el-input
                v-model="searchFormInline.sn"
                placeholder="请输入SN检索"
                clearable
                prefix-icon="Search"
                class="ei_1"
                style="width: 190px"
              />
            </el-form-item>
            <el-form-item label="结果:">
              <el-select
                v-model="searchFormInline.result"
                placeholder="请选择结果检索"
                clearable
                prefix-icon="Search"
                class="ei_1"
                style="width: 150px"
              >
                <el-option label="OK" value="ok"></el-option>
                <el-option label="NG" value="ng"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="进站时间:">
              <el-date-picker
                v-model="searchFormInline.inTime"
                type="datetime"
                placeholder="进站时间"
                style="width: 175px"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
            <el-form-item label="出站时间:" style="margin-left: -20px">
              <el-date-picker
                v-model="searchFormInline.outTime"
                type="datetime"
                placeholder="出站时间"
                style="width: 175px"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
            <el-form-item class="search-end">
              <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
              <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
      <el-card shadow="never">
        <!-- 表格数据 -->
        <div class="table">
          <el-table :data="currentTableData" :fit="true" :header-cell-style="{ textAlign: 'center' }">
            <el-table-column type="index" label="排序" align="left" width="100px"></el-table-column>
            <el-table-column prop="ProcessId" label="工序编号" align="left"></el-table-column>
            <el-table-column prop="PartId" label="料号编号" align="left"></el-table-column>
            <el-table-column prop="Sn" label="SN" align="left"></el-table-column>
            <el-table-column prop="Result" label="结果" align="center">
              <template #default="scope">
                <el-tag type="success" v-if="scope.row.Result == 'OK'">OK</el-tag>
                <el-tag type="danger" v-else-if="scope.row.Result == 'NG'">NG</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="InTime" label="进站时间" align="left" show-overflow-tooltip></el-table-column>
            <el-table-column prop="OutTime" label="出站时间" align="left" show-overflow-tooltip></el-table-column>
            <el-table-column prop="IsRework" label="是否返修" align="center">
              <template #default="scope">
                <el-tag type="success" v-if="scope.row.IsRework == 'False'">否</el-tag>
                <el-tag type="danger" v-else-if="scope.row.IsRework == 'True'">是</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="Data" label="测试数据" align="left"></el-table-column>
            <el-table-column prop="Detail" label="参数详情" align="left" show-overflow-tooltip></el-table-column>

            <el-table-column prop="CarrierId" label="载座号" align="left"></el-table-column>
          </el-table>
        </div>
        <div class="pager-foot">
          <!-- 分页 -->
          <el-pagination
            background
            :page-sizes="[10, 20, 30, 40]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="config.total"
            class="pager mt-5"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from "vue"
import { Search, Refresh } from "@element-plus/icons-vue"
import { ElMessage, ElMessageBox, FormInstance } from "element-plus"
import { getProductionRecordDataApi } from "@/api/business/bus-productionRecord"

// #region 定义属性值
/**分页配置 */
const config = reactive({
  total: 0,
  page: 1,
  size: 10,
  //进行搜索的关键词
  sn: "",
  result: "",
  inTime: "",
  outTime: ""
})
/**搜索绑定 */
const searchFormInline = reactive({
  sn: "",
  result: "",
  inTime: "",
  outTime: ""
})
/**当前表格数据 */
const currentTableData = ref()
// #endregion

onMounted(() => {
  getTableData(config)
})

// #region Table主页面相关操作
/** 关键字搜索*/
const handleSearch = () => {
  config.sn = searchFormInline.sn
  config.result = searchFormInline.result
  config.inTime = searchFormInline.inTime
  config.outTime = searchFormInline.outTime
  config.page = 1
  getTableData(config)
}
/**重置查询 */
const resetConfig = () => {
  Object.assign(config, {
    total: 0,
    page: 1,
    size: 10,
    sn: "",
    result: "",
    inTime: "",
    outTime: ""
  })
}
/**重置搜索表单内容 */
const resetSearchFormInline = () => {
  Object.assign(searchFormInline, {
    sn: "",
    result: "",
    inTime: "",
    outTime: ""
  })
}
/** 重置搜索*/
const resetSearch = () => {
  resetSearchFormInline()
  resetConfig()
  getTableData(config)
}

/**分页跳转 */
const handleCurrentChange = (val: number) => {
  config.page = val
  getTableData(config)
}
/** 改变每页条数 */
const handleSizeChange = (val: number) => {
  config.size = val
  getTableData(config)
}

/**获取表格数据 */
const getTableData = async (config: any) => {
  let res: any = await getProductionRecordDataApi(config)
  if (res) {
    console.log("%c [ res ]-186", "font-size:13px; background:pink; color:#bf2c9f;", res)
    config.total = res.total
    currentTableData.value = res.dataList
  }
}
// #endregion
</script>
<style lang="scss" scoped>
.app-container {
  padding: 20px 20px 10px 20px !important;
}
.searchTop {
  margin-bottom: 10px;
  :deep(.el-card__body) {
    padding-bottom: 2px;
  }
}
// .search-end {
//   display: flex;
//   justify-content: end;
// }
.table {
  display: flex;
  margin-bottom: 0px;
}
.pager-foot {
  display: flex;
  justify-content: flex-end;
}
.dialog-foot {
  display: flex;
  justify-content: end;
}
.form_description {
  :deep(.el-textarea__inner) {
    height: 100px;
  }
}
.dialog-form {
  margin-top: 20px;
}
</style>
